<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2024-09-26 09:25:16
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-10-17 11:13:11
 * @FilePath: \hy-ui\src\views\taskMassage\components\statistics\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="statistics" v-if="active === '1'" :style="{height:isProject ? '75vh' : '85vh'}">
      <div class="leftSearch" :style="{height:isProject ? '75vh' : '85vh'}">
        <el-form label-position="top" label-width="120px">
          <el-form-item label="项目筛选" v-if="!isProject">
            <el-select
              v-model="form.project"
              placeholder="请选择"
              style="width: 100%"
              filterable
              size="small"
              multiple
              collapse-tags
            >
              <el-option
                v-for="item in projectList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签筛选">
            <el-select
              v-model="form.tag"
              multiple
              collapse-tags
              placeholder="请选择"
              style="width: 100%"
              filterable
              size="small"
            >
              <el-option
                v-for="item in tagList"
                :key="item.id"
                :label="item.tag"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间筛选">
            <el-select
              v-model="form.timeType"
              multiple
              collapse-tags
              placeholder="请选择"
              style="width: 100%"
              filterable
              size="small"
            >
              <el-option label="创建时间" value="1"> </el-option>
              <el-option label="计划开始时间" value="2"> </el-option>
              <el-option label="计划结束时间" value="3"> </el-option>
              <el-option label="完成时间" value="4"> </el-option>
            </el-select>
            <el-date-picker
              v-model="form.time2"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 100%; margin-top: 12px"
              size="small"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="任务状态">
            <el-select
              v-model="form.status"
              multiple
              collapse-tags
              placeholder="请选择"
              style="width: 100%"
              filterable
              size="small"
            >
              <el-option label="未完成" value="1"> </el-option>
              <el-option label="已完成" value="2"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="人员筛选">
            <el-select
              v-model="form.adminType"
              multiple
              collapse-tags
              placeholder="请选择"
              style="width: 100%"
              filterable
              size="small"
            >
              <el-option label="创建人" value="1"> </el-option>
              <el-option label="负责人" value="2"> </el-option>
              <el-option label="参与人" value="3"> </el-option>
              <el-option label="抄送人" value="4"> </el-option>
              <el-option label="审批人" value="5"> </el-option>
            </el-select>
            <el-select
              v-model="form.admin"
              multiple
              collapse-tags
              placeholder="请选择"
              style="width: 100%; margin-top: 12px"
              filterable
              size="small"
            >
              <el-option
                v-for="item in list"
                :key="item.userId"
                :label="item.nickName"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="rightics" :style="{height:isProject ? '75vh' : '85vh'}">
        <div class="overview">
          <div
            class="overviewItem"
            @click="handleProject"
            v-if="!isProject && !form.project.length"
          >
            <span style="color: RGB(136, 136, 136)">1</span>
            <span>参与项目</span>
          </div>
          <div
            class="overviewItem"
            @click="handleTimeRecording"
            v-if="isProject || form.project.length"
          >
            <span style="color: RGB(136, 136, 136)">1</span>
            <span>工时统计（天）</span>
          </div>
          <div class="overviewItem" @click="handleTask">
            <span style="color: RGB(101, 180, 241)">2</span>
            <span>与我相关任务</span>
          </div>
          <div class="overviewItem">
            <span style="color: RGB(212, 136, 214)">1</span>
            <span>今日到期任务</span>
          </div>
          <div class="overviewItem">
            <span style="color: RGB(254, 140, 151)">1</span>
            <span>已逾期任务</span>
          </div>
          <div class="overviewItem">
            <span style="color: RGB(77, 204, 210)">1</span>
            <span>进行中任务</span>
          </div>
          <div class="overviewItem">
            <span style="color: RGB(231, 194, 97)">1</span>
            <span>审批中任务</span>
          </div>
          <div class="overviewItem">
            <span style="color: RGB(112, 179, 126)">1</span>
            <span>按时完成任务</span>
          </div>
          <div class="overviewItem">
            <span style="color: RGB(244, 163, 132)">1</span>
            <span>逾期完成任务</span>
          </div>
        </div>
        <div class="row">
          <div class="chart">
            <div class="title">任务分布情况</div>
            <div>
              <TaskDistributionSituation :chartData="chartData1" :type="1" />
            </div>
          </div>
          <div class="chart">
            <div class="title">优先级分布情况</div>
            <div>
              <TaskDistributionSituation :chartData="chartData2" :type="2" />
            </div>
          </div>
        </div>
        <div class="row">
          <div class="chart">
            <div class="title">任务进展排行统计柱状图</div>
            <div><Ranking :chartData="chartData1" :type="1" /></div>
          </div>
          <div class="chart">
            <div class="title">任务进展排行统计详情</div>
            <div style="padding: 10px">
              <el-table
                :data="tableData"
                style="width: 100%"
                border
                height="350"
                @cell-click="handleCellClick"
              >
                <el-table-column prop="date" label="负责人" align="center">
                </el-table-column>
                <el-table-column prop="name" label="已逾期" align="center">
                </el-table-column>
                <el-table-column prop="address" label="未开始" align="center">
                </el-table-column>
                <el-table-column prop="address" label="进行中" align="center">
                </el-table-column>
                <el-table-column prop="address" label="审批中" align="center">
                </el-table-column>
                <el-table-column prop="address" label="逾期完成" align="center">
                </el-table-column>
                <el-table-column prop="address" label="按时完成" align="center">
                </el-table-column>
                <el-table-column prop="address" label="总数" align="center">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <TimeRecording v-if="active === '2'" :handleGoBack="() => (active = '1')" :isProject="isProject"/>
    <ProjectDetail v-if="active === '3'" :handleGoBack="() => (active = '1')" :isProject="isProject"/>
    <TaskDetail v-if="active === '4'" :handleGoBack="() => (active = '1')" :isProject="isProject"/>
  </div>
</template>

<script>
import { listUser } from "@/api/system/user.js";
import { getProject, getTagList } from "@/api/task/task.js";
import TaskDistributionSituation from "@/views/taskMassage/components/statistics/components/taskDistributionSituation";
import Ranking from "@/views/taskMassage/components/statistics/components/ranking";
import TimeRecording from "@/views/taskMassage/components/statistics/components/timeRecording";
import ProjectDetail from "@/views/taskMassage/components/statistics/components/projectDetail";
import TaskDetail from "@/views/taskMassage/components/statistics/components/taskDetail";

export default {
  components: {
    TaskDistributionSituation,
    Ranking,
    TimeRecording,
    ProjectDetail,
    TaskDetail,
  },
  props: {
    isProject: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      active: "1",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "王小虎",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "王小虎",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "王小虎",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "王小虎",
        },
      ],
      list: [],
      tagList: [],
      projectList: [],
      form: {
        adminType: ["1", "2", "3", "4", "5"],
        timeType: ["1", "2", "3", "4"],
        project: [],
      },
      chartData1: [
        {
          value: 335,
          name: "未开始",
          itemStyle: { color: "RGB(68,199,236)" },
        },
        {
          value: 310,
          name: "进行中",
          itemStyle: { color: "RGB(51,196,181)" },
        },
        {
          value: 234,
          name: "已逾期",
          itemStyle: { color: "RGB(254,140,151)" },
        },
        {
          value: 154,
          name: "审批中",
          itemStyle: { color: "RGB(231,194,97)" },
        },
        {
          value: 154,
          name: "按时完成",
          itemStyle: { color: "RGB(112,179,126)" },
        },
        {
          value: 154,
          name: "逾期完成",
          itemStyle: { color: "RGB(244,163,132)" },
        },
      ],
      chartData2: [
        {
          value: 335,
          name: "普通",
          itemStyle: { color: "RGB(220,220,220)" },
        },
        {
          value: 310,
          name: "紧急",
          itemStyle: { color: "RGB(245,201,82)" },
        },
        {
          value: 234,
          name: "非常紧急",
          itemStyle: { color: "RGB(255,132,132)" },
        },
      ],
    };
  },
  methods: {
    handleTimeRecording() {
      this.active = "2";
    },
    handleProject() {
      this.active = "3";
    },
    handleTask() {
      this.active = "4";
    },
    handleCellClick(row, column) {
      this.active = "4";
      console.log(row, column.property, row[column.property]);
    },
    async getProjectFun() {
      const res = await getProject();
      if (res.code === 200) {
        this.projectList = res.rows;
      }
    },
    async getTagListFun() {
      const res = await getTagList();
      this.tagList = res.data;
    },
  },
  async mounted() {
    this.getProjectFun();
    this.getTagListFun();
    const res = await listUser({
      pageNum: 1,
      pageSize: 9999,
      status: "0",
      userType: "front_user",
    });
    this.list = res.rows;
  },
};
</script>

<style lang="scss" scoped>
.statistics {
  height: 75vh;
  display: flex;
  .leftSearch {
    width: 280px;
    height: 75vh;
    overflow-y: auto;
    padding: 12px;
  }
  .rightics {
    height: 75vh;
    overflow-y: auto;
    padding: 12px;
    background: #f9f9f9;
    width: 100%;
    padding: 12px 30px;
    .overview {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-column-gap: 80px;
      grid-row-gap: 30px;
      justify-items: stretch;
      align-items: start;
      .overviewItem {
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: #fff;
        padding: 40px 30px 20px 30px;
        cursor: pointer;
        box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.1);
        border-radius: 6px;
        transition: 150ms ease all;
        &:hover {
          transform: translateY(-5px);
        }
        & > span:nth-of-type(1) {
          font-size: 50px;
          text-align: center;
        }
        & > span:nth-of-type(2) {
          font-size: 14px;
          color: RGB(102, 102, 102);
          text-align: center;
          margin-top: 20px;
        }
      }
    }
    .row {
      display: flex;
      justify-content: space-between;
    }
    .chart {
      background: #fff;
      width: calc((100% - 80px) / 2);
      height: 420px;
      box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.1);
      border-radius: 6px;
      margin-top: 30px;
      .title {
        font-size: 14px;
        border-bottom: 1px solid #f1efef;
        padding: 16px 0 16px 24px;
      }
    }
  }
  ::v-deep .el-table .el-table__header-wrapper th {
    background: RGB(243, 243, 243);
    color: #666;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
  }
}
</style>